<template>
  <div class="search">
    <form action="/" class="search-box">
      <van-icon name="arrow-left" @click="$router.go(-1)" />
      <van-search
        v-model.trim="val"
        placeholder="批准文号、通用名、商品名、症状"
        show-action
        :clearable="true"
        shape="round"
        @search="onSearch"
      >
        <div slot="action" @click="onSearch">搜索</div>
      </van-search>
    </form>
    <div class="main">
      <div class="history">
        <div class="history-title">
          <span>历史搜索</span>
          <van-icon name="delete" @click="del" />
        </div>
        <div class="history-main">
          <div class="nomore" v-if="!histories.length">
            <p>暂无搜索记录</p>
          </div>
          <div
            v-else
            class="his"
            v-for="(item,index) in histories"
            :key="index"
            @click="clickSearch($event)"
          >{{item}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      val: "",
      histories: []
    };
  },
  mounted() {
    this.getHis();
  },
  methods: {
    clickSearch(e) {
      // 点击 历史记录搜索
      let val = e.target.innerHTML;
      this.val = val;
      this.onSearch();
    },
    getHis() {
      let his = localStorage.getItem("search")
        ? JSON.parse(localStorage.getItem("search"))
        : [];
      this.histories = his;
    },
    del() {
      let his = localStorage.removeItem("search");
      let _this = this;
      this.$toast.success({
        message: "删除历史搜索成功",
        duration: 1000,
        onClose() {
          _this.$router.go(0);
        }
      });
    },
    onSearch() {
        let _this = this;
        // 存历史记录
        let his = localStorage.getItem("search")
          ? JSON.parse(localStorage.getItem("search"))
          : [];
         if (!this.val == "") {
           his.unshift(this.val);
           his = [...new Set(his)];
            localStorage.setItem("search", JSON.stringify(his));
         }
        if (his.length > 10) {
          his.pop();
        }
        this.$router.push({
          path: "/searchResult",
          query: {
            words: _this.val
          }
        });
      }
    }
  }

</script>

<style lang="less" scoped>
.search {
  .search-box {
    position: relative;
    width: 100%;
    .van-icon-arrow-left {
      position: absolute;
      top: 17px;
      left: 9px;
      font-size: 26px;
      color: #fff;
    }
    /deep/.van-search {
      background: #2fd866 !important;
      background-image: linear-gradient(
          90deg,
          #5ee3ff 0,
          #47deb3 38%,
          #2fd866 100%
        ),
        linear-gradient(#fff, #fff) !important;
      height: 60px;
      .van-search__content {
        margin-left: 30px;
        padding-left: 16px;
        .van-icon-search {
          font-size: 20px;
          color: #ccc;
        }
      }
      .van-search__action {
        padding: 0 16px;
        color: #fff;
        font-size: 15px;
      }
    }
  }
  .main {
    padding: 0 20px;
    .history {
      padding: 16px 0;
      &-title {
        color: #333;
        display: flex;
        justify-content: space-between;
        .van-icon-delete {
          font-size: 22px;
          color: #aaa;
        }
        span {
          padding: 0 5px;
          position: relative;
        }
        span::before {
          position: absolute;
          z-index: -1;
          bottom: 0px;
          left: 0;
          content: "";
          width: 100%;
          height: 7px;
          box-shadow: 0.05555556rem 0.09259259rem 0.16666667rem 0
            rgba(131, 241, 219, 0.59);
          background-image: linear-gradient(90deg, #4bfdf2 0, #4bff8f 100%),
            linear-gradient(#94ffc4, #94ffc4);
        }
      }
      &-main {
        padding: 10px 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-start;
        .nomore {
          font: 16px/30px "微软雅黑";
          color: #999;
        }
        .his {
          font-size: 12px;
          padding: 0 12px;
          line-height: 40px;
          background: #fafafa;
          color: #999;
          margin-top: 10px;
          margin-right: 10px;
          border-radius: 20px;
        }
      }
    }
  }
}
</style>